課程目的:

這次的內容是做出一個語音合成器，像是在google翻譯時可以選擇聽字詞的發音，基於這個功能增加暫停以及加快速度或提升音高的功能
作品實做

本次功能實作重點：

• 製作點擊speak按鈕後進行語音撥放
• 當偵測到下拉選單改變聲音合成器之後，語音進行撥放
• 暫停語音功能

製作點擊speak按鈕後進行語音撥放，以及調整語速及音高功能

   const msg = new SpeechSynthesisUtterance(); //製作一個語音合成器
   msg.text = document.querySelector('[name="text"]').value;//設定一開始語音文本的內容
   const options = document.querySelectorAll('[type="range"], [name="text"]');
   const speakButton = document.querySelector("#speak"); //選取文字欄跟語速及音高的Dom元素
      
   function toggle(startOver = true) {
     speechSynthesis.cancel(); //先取消語音動作
     //如果startOver = true則語音文本內容
     if (startOver) {
          speechSynthesis.speak(msg); 
        }
      }
      
        function setOption() {
        console.log(this.name, this.value);
        msg[this.name] = this.value; //取得當下的值
        toggle(); //播放
      }
      
      speakButton.addEventListener("click", toggle);//當我點擊時撥放語音
       options.forEach((option) => option.addEventListener("change", setOption)); 
       //如果文字欄跟語速及音高發生調整

什麼是SpeechSynthesisUtterance()

SpeechSynthesisUtteranc是 Web Speech API 的一部分，專門用於實現文本到語音的功能。這個物件包含了一個語音合成器朗讀的文本，可以定義的屬性有語音、音量、語速、音高、文本。

• 設置要語音的文本：使用 text 屬性指定要朗讀的字符串。
• 選擇語音：使用 voice 屬性來選擇合成語音的語音。
• 調整音量：使用 volume 屬性設置音量，範圍是 0.0 到 1.0。
• 調整語速：使用 rate 屬性設置語速，範圍是 0.1 到 10.0。
• 調整音高：使用 pitch 屬性設置音高，範圍是 0 到 2。

當偵測到下拉選單改變聲音合成器之後，語音進行撥放

 let voices = [];
 const voicesDropdown = document.querySelector('[name="voice"]');
 
 function populateVoices() {
        voices = this.getVoices(); //get語音合成器列表

        //篩選zh語系渲染選擇列
        voicesDropdown.innerHTML = voices
          .filter((voice) => voice.lang.includes("zh"))
          .map(
            (voice) =>
              `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`
          )
          .join("");
      }
      
  function setVoice() {
       //mag.voice的值=語音列表裡裡與下拉選單相同的值
        msg.voice = voices.find((voice) => voice.name === this.value);
        toggle();
      }

 speechSynthesis.addEventListener("voiceschanged", populateVoices);
 //當首次加載頁面或當語音合成的聲音列表（voices）發生變化時會觸發。
 voicesDropdown.addEventListener("change", setVoice); 
 //當偵測到下拉選單改變聲音合成器的時候執行

暫停語音功能

 const stopButton = document.querySelector("#stop");
 stopButton.addEventListener("click", () => toggle(false)); //當點擊時停止播放

導讀文件以及學習資源

[ Alex 宅幹嘛 ] 👨‍💻 深入淺出 Javascript30 快速導覽 | Day 23：Speech Synthesis
JS30